<template>
	<view class="">
		<view class="margin-top-sm">
			<!-- 搜索框 -->
			<view style="margin-top: 20rpx;display: flex;">
				<view style="width: 150rpx;margin: 0rpx 10px;">
					<button class="login-btn cu-btn block bg-white" @click="showMore">更多</button>
				</view>
				<view style="flex: 1;margin: 0rpx 10px;">
					<uni-easyinput ConfirmType="search" type="text" suffixIcon="search" confirmType="search"
						v-model="queryFrom.student_name" placeholder="学生姓名" @iconClick="init" @confirm="init">
						<view v-slot='right'>
							asdf
						</view>
					</uni-easyinput>
				</view>
				<view style="width: 150rpx;margin: 0rpx 10px;">
					<button class="login-btn cu-btn block bg-blue" @click="init">查询</button>
				</view>
			</view>
		</view>

		<view class="font-12 juzhong navbar " style="color: #999;padding: 10rpx;" v-if="total>0">
			第{{queryFrom.pageNo}}页，共计{{total}}条
		</view>


		<view v-if="list.length==0" class="margin-top-sm">
			<blues-empty img="msg" text="暂无数据">

			</blues-empty>
		</view>
		<view
			:class="{'bg-white  padding-sm list-item  margin-bottom-sm':true,'background-text-shengxiao':item.startus==1,'background-text-2':item.startus==2,'background-text-shixiao':item.startus==3}"
			v-for="(item,index) in list" @click="onClick(item)" :style="{animationDelay:gets(index)}">
			<view style="z-index:3;position: relative;margin:0px 20rpx;">
				<view style="display: flex;justify-content: space-between;">
					<view>
						<view style="font-weight: bold;font-size: 30rpx;">{{item.customer.student.name}}</view>
						<view class="font-13 margin-top-sm ">
							{{$getDictNameByValue("offline_class_name", item.offlineClassName)}}
						</view>
						<view class="font-12 margin-top-sm ">
							<vab-icon class="vab-icon font-14" :icon="['fas', 'ban']"
								:style="{color:'#999'}"></vab-icon>

							<text class="margin-left-xs">{{item.endDate}}</text>

						</view>
					</view>

					<view style="text-align: right;">
						<view class=" font-12" style="z-index: 3;">
							查看详情<uni-icons type="right" size="12"></uni-icons>
						</view>
						<view class="font-12 margin-top-sm " style="">
							{{formatterUserName(item.createBy)}} 老师
						</view>
						<view class="font-12 margin-top-sm " style="">
							<text
								:class="{'  padding-xs radius':true,'bg-green':item.isJy==1,'bg-gray':item.isJy==0}">教研</text>
							<text
								:class="{'  padding-xs margin-left-sm radius ':true,'bg-green':item.isSummary==1,'bg-gray':item.isSummary==0}">总结</text>
						</view>
					</view>


				</view>


			</view>
		</view>

		<!-- 查询更多 -->
		<customerQuery @refresh="init" ref="customerQuery">
			<template v-slot:default="slotProps">
				<uni-forms-item label="课程名称">
					<uni-data-select v-model="queryFrom.offlineClassName_EQ"
						:localdata="slotProps.dict.offline_class_name" placeholder="选择课程名称"></uni-data-select>
				</uni-forms-item>

			</template>

		</customerQuery>
		<view class="floating-div cu-btn juzhong bg-blue" @click="add">
			<uni-icons type="plusempty" size="30" color="#fff" style="font-weight: bold;"></uni-icons>
		</view>

		<uni-popup ref="add" type="bottom">
			<view class="bg-white radius" style="padding-bottom: 300rpx;">
				<uni-section title="客户信息" type="circle" class="">

					<view class="padding-sm " style="padding-top: 0px;">
						<view style="display: flex;" class="margin-bottom-sm ">
							<view style="width: 150rpx;" class="juzhong">学生姓名</view>

							<view style="flex: 1;" v-if="addData!=null&&addData.customer!=null">
								{{addData.customer.student.name}}<button class="cu-btn margin-left "
									@click="showcustomerQueryId">重选</button>
							</view>
							<view style="flex: 1;" v-if="addData==null">
								<button class="cu-btn" @click="showcustomerQueryId">选择学生</button>
							</view>
						</view>

						<view style="display: flex;" class="margin-bottom-sm">
							<view style="width: 150rpx;" class="juzhong">课程名称</view>
							<view style="flex: 1;" v-if="addData">
								<uni-data-select v-model="addData.offlineClassName" :localdata="dict.offline_class_name"
									placeholder="选择课程名称"></uni-data-select>
							</view>
						</view>
					</view>

					<button @click="next()" type="primary" class="login-btn cu-btn block bg-blue  round">下一步</button>
				</uni-section>
			</view>

		</uni-popup>
		<customerQueryId ref="customerQueryId" @clickCustomer="clickCustomer"></customerQueryId>
	</view>

</template>

<script>
	import {
		doDelete,
		doDeleteAll,
		doExportExcel,
		doUpdateOutTime,
		getGjzmsById,
		getJYPlan,
		getList,
		getUnfinishedMonthlyPlanInsert
	} from "@/api/lpc/monthlyplan/LpcMonthlyPlanManagementApi";
	import {
		isNull
	} from '@/utils/validate'
	import customerQuery from "@/pages/common/customerQuery/customerQuery.vue"
	import customerQueryId from "@/pages/marketing/customer/query.vue"
	import {
		getcommon,
		formatterUserName,
		formattersysClassroomName
	} from "@/utils/common.js";
	export default {
		components: {
			customerQuery,
			customerQueryId
		},
		data() {
			return {
				queryFrom: {
					pageNo: 1,
					pageSize: 10,
					startus_EQ: null,
					endDate_ORDER: "DESC",
					customerId_EQ: null,
				},
				addData: null,
				total: 0,
				list: [],
				dict: {}
			}
		},
		mounted() {
			this.dict.offline_class_type = this.$getDictList("offline_class_type");
			this.dict.offline_class_name = this.$getDictList("offline_class_name");
			for (let s of this.dict.offline_class_name) {
				s.text = s.dictName
				s.value = s.dictValue
			}
		},
		onLoad(op) {
			if (op.customerId != null) {
				this.queryFrom.customerId_EQ = op.customerId
			}
			this.init()
		},

		// 触底事件 - 上拉加载
		onReachBottom() {
			// 加判断： 页码数 * 每一页获取数据的条数 >= 总条数，如果符合条件说明数据已经全部加载完毕
			if (this.queryFrom.pageNo * this.queryFrom.pageSize >= this.total) {

				return
			} else {

				this.queryFrom.pageNo++ // 每触发一次触底事件，页码加1
				this.listAdd() // 请求接口，获取数据  
			}
		},
		methods: {
			next() {
				uni.navigateTo({
					url: "/pages/lpc/monthlyplan/edit?name=" + this.addData.customer.student.name + "&cid=" + this
						.addData.customer.id + "&offlineClassName=" + this.addData.offlineClassName
				})
			},
			clickCustomer(e) {
				this.addData = {
					customer: e,
					offlineClassName: null
				}
				console.log(this.addData);
			},
			add() {
				this.$refs.add.open()
			},
			showcustomerQueryId() {
				this.$refs.customerQueryId.open()
			},
			gets(index) {
				if (index < 10) {
					return index * 0.2 + 's'
				} else {
					return (index % 10 + 1) * 0.2 + 's'
				}

			},
			onClick(item) {
				uni.navigateTo({
					url: "/pages/lpc/monthlyplan/edit?id=" + item.id
				})
			},
			showMore() {
				this.$refs["customerQuery"].open(this.queryFrom);
			},
			init() {
				this.list = []
				this.total = 0
				this.queryFrom.pageNo = 1
				//查询合同信息
				this.fetchData()
			},
			listAdd() {
				//查询合同信息
				this.fetchData()
			},
			async fetchData() {
				const {
					data
				} = await getList(this.queryFrom);
				if (!isNull(data)) {
					for (let s of data.rows) {
						this.list.push(s)
					}
					this.total = data.total;
				}

			},
			formatterUserName(cellValue) {
				return formatterUserName(
					cellValue

				)
			},
		}
	}
</script>

<style>
	.floating-div {
		position: fixed;
		bottom: 10px;
		right: 10px;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: #f2f2f2;

	}

	.navbar {

		width: 100%;


		background-color: #f1f1f1;
		z-index: 4;
		text-align: center;

		/* 兼容 */

		position: -webkit-sticky;

		position: -ms-sticky;

		position: -o-sticky;

		/* 粘性定位*/

		position: sticky;

		left: 0;

		top: 0
	}
</style>